<template>
	<view
		class="shadow bag"
		:style="{
			overflow: isPackUp ? 'visible' : 'hidden'
		}"
	>
		<view class="packUp" @click="packUp">
			<u-image :src="bag" width="76rpx" height="76rpx"></u-image>
			<view class="tag">{{ cartSelectNum }}</view>
		</view>
		<view
			class="unfold"
			:style="{
				width: isPackUp ? '0' : '570rpx',
				height: isPackUp ? '0' : '100rpx',
				overflow: isPackUp ? 'hidden' : 'visible'
			}"
			@click="cartShow = !cartShow"
		>
			<view class="">
				<view class="">
					<text class="text-[30rpx] mr-[8rpx]">需支付金额</text>
					<text class="text-[36rpx] text-[#E55800]">¥{{ totalPrice }}</text>
				</view>
				<view class="text-[20rpx] text-gray mt-[6rpx]">共优惠¥{{ totalDiscount }}</view>
			</view>
			<view
				class="settleAnAccount"
				:style="{
					width: isPackUp ? '0' : '182rpx',
					height: isPackUp ? '0' : '104rpx',
					overflow: isPackUp ? 'hidden' : 'visible'
				}"
				@click.stop="account"
			>
				{{ cartSelectNum ? '去结算' : '不可结算' }}
			</view>
		</view>
	</view>
	<up-popup :show="cartShow" zIndex="90" overlayOpacity="0" :safeAreaInsetBottom="false" @close="cartShow = false">
		<view class="cart">
			<view class="cart_header flex items-center justify-between">
				<view class="flex items-center">
					<view class="" @click="checkAll">
						<up-image :src="check" v-if="!isAllCheck" width="28rpx" height="28rpx"></up-image>
						<up-image :src="checked" v-else width="28rpx" height="28rpx"></up-image>
					</view>
					<view class="text-[26rpx] ml-[16rpx]">已选购商品（{{ cartSelectNum }}件）</view>
				</view>
				<up-icon name="trash" size="32rpx" label="清空购物车" labelSize="22rpx" @click="clearCart"></up-icon>
			</view>
			<scroll-view scroll-y="true" class="cart_list">
				<view class="cart_item flex items-center" v-for="item in cartList" :key="item.id">
					<view class="" @click="checkItem(item)">
						<up-image :src="check" v-if="!item.isCheck" width="28rpx" height="28rpx"></up-image>
						<up-image :src="checked" v-else width="28rpx" height="28rpx"></up-image>
					</view>
					<view class="flex flex-1 ml-[32rpx]">
						<up-image :src="$setBaseUrl(item.icon)" width="128rpx" height="128rpx"></up-image>
						<view class="flex flex-col justify-between ml-[16rpx]">
							<view class="">
								<view class="text-black text-[26rpx]">{{ item.name }}</view>
								<view class="text-gray text-[22rpx]">{{ item.brief }}</view>
							</view>
							<view class="text-[28rpx]">
								<text class="text-[#FF4D1B]">¥{{ item.price }}</text>
								<text class="text-gray line-through ml-[8rpx]">¥{{ item.demoPrice }}</text>
							</view>
						</view>
						<view class="ml-auto flex items-end">
							<up-number-box v-model="item.num" @change="changeNum" @overlimit="overlimit($event, item.id)">
								<template #minus>
									<up-icon name="minus-circle" color="#C39A71" size="20"></up-icon>
								</template>
								<template #input>
									<text class="text-[30rpx] w-[50rpx] text-center">{{ item.num }}</text>
								</template>
								<template #plus>
									<up-icon name="plus-circle-fill" color="#C39A71" size="20"></up-icon>
								</template>
							</up-number-box>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="placeholder"></view>
		</view>
	</up-popup>
</template>

<script setup>
import { computed, nextTick, ref } from 'vue';
import bag from '@/static/bag.png';
import check from '@/static/check.png';
import checked from '@/static/checked.png';
import utils from '../../utils/utils';
const props = defineProps({
	isPackUp: {
		type: Boolean,
		default: false
	},
	cartList: {
		type: Array,
		default: () => []
	}
});
const emit = defineEmits(['account', 'packUp', 'cartChange', 'deleteCart', 'clearCart']);
const cartShow = ref(false);
//是否全选
const isAllCheck = computed({
	get() {
		return props.cartList.every((item) => item.isCheck);
	},
	set(val) {
		props.cartList.forEach((item) => {
			item.isCheck = val;
		});
	}
});

//购物车数量
const cartNum = computed(() => {
	return props.cartList.length;
});

//购物车选中数量
const cartSelectNum = computed(() => {
	return props.cartList
		.filter((item) => item.isCheck)
		.reduce((pre, cur) => {
			return pre + cur.num;
		}, 0);
});

//总共优惠
const totalDiscount = computed(() => {
	return props.cartList
		.filter((item) => item.isCheck)
		.reduce((total, item) => {
			return total + (item.demoPrice - item.price) * item.num;
		}, 0)
		.toFixed(2);
});

//总价格
const totalPrice = computed(() => {
	return props.cartList
		.filter((item) => item.isCheck)
		.reduce((total, item) => {
			return total + item.price * item.num;
		}, 0)
		.toFixed(2);
});

const checkItem = (item) => {
	item.isCheck = !item.isCheck;
	emit('cartChange');
};

const checkAll = () => {
	isAllCheck.value = !isAllCheck.value;
	emit('cartChange');
};

const changeNum = () => {
	nextTick(() => {
		emit('cartChange');
	});
};

const overlimit = async (e, id) => {
	if (e === 'minus') {
		await utils.showModal('是否删除该商品？');
		emit('deleteCart', id);
	}
};

const clearCart = async () => {
	await utils.showModal('是否清空购物车？');
	emit('clearCart');
};

const account = () => {
	if (!cartSelectNum.value) {
		return;
	}
	emit('account');
};
const packUp = () => {
	emit('packUp');
};
</script>

<style scoped lang="scss">
.bag {
	@apply fixed bottom-[calc(32rpx+var(--window-bottom))] right-[32rpx] z-[99] bg-white rounded-full flex items-center;
	.packUp {
		@apply relative w-[104rpx] h-[104rpx] flex items-center justify-center;
		.tag {
			@apply absolute top-[2rpx] right-0 w-[40rpx] h-[28rpx] bg-second text-[20rpx] text-white text-center leading-[28rpx] rounded-full;
		}
	}
	.unfold {
		@apply flex items-center justify-between w-[570rpx]  transition-all;
		.settleAnAccount {
			@apply w-[182rpx] h-[104rpx] bg-second flex items-center justify-center text-[34rpx] text-white;
		}
	}
}
.cart {
	&_header {
		@apply px-[32rpx] py-[28rpx] border-b border-background;
	}
	&_list {
		@apply h-[40vh];
	}
	&_item {
		@apply px-[32rpx] py-[36rpx] bg-[#fff];
	}
	.placeholder {
		@apply h-[calc(168rpx+var(--window-bottom))];
	}
	.circle {
		@apply w-[32rpx] h-[32rpx] border  rounded-full;
	}
}
.shadow {
	box-shadow: 0rpx 4rpx 8rpx 2rpx rgba(161, 84, 36, 0.32);
}
</style>
